<template>
  <div class="userList-box">
    <div class="userList-main">
      <div class="table-top" style="display: inline-block;text-align: right">
        <!-- 操作按钮 -->
        <div>
          <el-button type="cancel" @click="batchDelete">删除</el-button>
          <el-button type="primary" @click="saveUserInfo(null,1)">新建</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" :index="indexMethod">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" type="index" label="序号" width="75">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="240">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="240">
          </el-table-column>
          <el-table-column prop="text" label="内容">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div>
                <span style="color: #e63e3b;cursor: pointer" @click="deleteUser(scope.row.title)">删除</span>
                <span style="color: #e63e3b;cursor: pointer;margin-left: 15px" @click="saveUserInfo(scope.row,2)">编辑</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="userTitle" :visible.sync="userTitleVisible" width="50%" top="5%">
      <el-form class :model="userData" :rules="rules" label-position="right" :inline="true" ref="userData" label-width="78px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input :disabled="userOperationType === 2" v-model="userData.title" placeholder="请输入标题" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="source">
              <el-input :disabled="userOperationType === 2" v-model="userData.source" placeholder="请输入类型" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="text">
              <el-input v-model="userData.text" placeholder="请输入内容" type="textarea" :rows="4" style="width: 700px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="cancelBtn()">取消</el-button>
        <el-button type="primary" v-if="userOperationType == 1" @click="addUser('userData')">保存</el-button>
        <el-button type="primary" v-if="userOperationType == 2" @click="updateUser('userData')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          id: 0,
          picUrl: 'http://101.35.150.167/xijinping/img/home01.jpg',
          title: '习近平同志提出的‘八八战略’',
          type: '习近平在浙江',
          text: '2003年7月10日，在省委第十一届四次全体（扩大）会议上，习近平同志在总结浙江经济社会多年发展经验的基础上，全面系统阐释了浙江发展的八个优势，提出了指向未来的八项举措，这就是“八八战略”。',
          url: '../details/details',
          pic: {
            url: 'http://101.35.150.167/xijinping/img/home01.jpg',
            num: 6
          },
          seenNum: 245,
          likeNum: 123,
          comments: {
            total: 2,
            content: [
              {
                user: '张三',
                text: '好',
                time: '2020-12-21 22:59',
                likeNum: 2
              },
              {
                user: 'Xusji',
                text: '+6666',
                time: '2020-12-21 22:59',
                likeNum: 4
              }
            ]
          },
          userInfo: {
            star: true,
            like: true
          },
          related: [
            {
              id: 0,
              picUrl: 'http://101.35.150.167/xijinping/img/home02.jpg',
              url: './details?title=职能制度化规范化程序化建设',
              title: '职能制度化规范化程序化建设'
            },
            {
              id: 1,
              picUrl: 'http://101.35.150.167/xijinping/img/home03.jpg',
              url: './details?title=干在实处、走在前列',
              title: '干在实处、走在前列'
            },
            {
              id: 2,
              picUrl: 'http://101.35.150.167/xijinping/img/home04.jpg',
              url: './details?title=浙江模式的亮点在哪里',
              title: '浙江模式的亮点在哪里'
            }
          ]
        },
        {
          id: 1,
          picUrl: 'http://101.35.150.167/xijinping/img/home02.jpg',
          title: '习书记高度重视政协履行职能制度化规范化程序化建设',
          text: '强调，处理同民主党派的关系，一定要坚持“长期共存、互相监督、肝胆相照、荣辱与共”的方针，以宪法和政协章程为依据，努力把这一基本政治制度坚持好、完善好、落实好。',
          url: '../details/details'
        },
        {
          id: 2,
          picUrl: 'http://101.35.150.167/xijinping/img/home03.jpg',
          title: '‘干在实处、走在前列’是习书记个人品格的高度凝练',
          text: '个国家有一个国家的国格，一个省有一个省的省格，一个人有一个人的人格，“干在实处、走在前列”就是我们浙江的省格，是浙江发展的精气神。同时，更是习书记个人品格的高度凝练、集中体现。',
          url: '../details/details'
        },
        {
          id: 3,
          picUrl: 'http://101.35.150.167/xijinping/img/home04.jpg',
          title: '习书记在基层，和老百姓在一起',
          text: '习书记非常注重深入基层开展调查研究，他的战略谋划都来自于对基层实际情况的了解。他经常说，要相信群众、依靠群众。他对老百姓的感情是非常深厚的，一有机会就往乡下跑，一有空就去调研。我同他一起到过很多地方调研。',
          url: '../details/details'
        },
        {
          id: 4,
          picUrl: 'http://101.35.150.167/xijinping/img/home05.jpg',
          title: '习书记提出28字要求',
          text: '激浊扬清、敬业乐业、乐在人和、力戒浮躁、贵耳重目、求知善读、戒奢节俭',
          url: '../details/details'
        },
        {
          id: 5,
          picUrl: 'http://101.35.150.167/xijinping/img/home06.jpg',
          title: '数字经济',
          text: '数字经济是人类通过大数据（数字化的知识与信息）的识别—选择—过滤—存储—使用，引导、实现资源的快速优化配置与再生、实现经济高质量发展的经济形态。数字经济，作为一个内涵比较宽泛的概念，',
          url: '../details/details'
        },
        {
          id: 6,
          picUrl: 'http://101.35.150.167/xijinping/img/home07.jpg',
          title: '制造优势',
          text: '浙江以高质量发展为主题，以供给侧结构性改革为主线，以数字化改革引领撬动质量变革、效率变革、动力变革，加快推动制造业数字化绿色化服务化转型，加快推动制造业由传统要素驱动向创新驱动转变，在高质量发展、竞争力提升、现代化先行中打造浙江制造竞争新优势，加快建设全球先进制造业基地，实现从制造大省向制造强省跃升。',
          url: '../details/details'
        },
        {
          id: 7,
          picUrl: 'http://101.35.150.167/xijinping/img/home08.jpg',
          title: '习近平在浙江',
          text: '习近平同志的地方领导实践中具有关键性的意义。这不仅在于他作为省委书记全面领导了浙江这样一个经济发达省份的工作，更在于他贯彻党的理论和路线方针政策，紧密结合浙江实际，提出并落实了作为浙江省域治理总纲领和总方略的“八八战略”，对浙江发展作出了全面规划和顶层设计，为浙江转型发展和长远发展奠定了坚实基础，也成为习近平新时代中国特色社会主义思想形成的重要理念和实践准备。',
          url: '../details/details'
        },
        {
          id: 8,
          picUrl: 'http://101.35.150.167/xijinping/img/home09.jpg',
          title: '人才政策',
          text: '浙江在人才引入中进行了各种各样的的探索与实践，有力推动了当地经济社会的发展。伴随近二年国际环境的变化、世界经济的一体化、人工智能、大数据等科技手段的广泛应用，人才流动趋势和人才结构的变化，各地招才引智的模式也在相应优化。',
          url: '../details/details'
        }
      ],

      loading: false,
      total: 0,
      userOperationType: 1,
      userTitle: '',
      userTitleVisible: false,
      userData: {},
      deleteIdList: [],
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 新增或保存
    saveUserInfo(userData, type) {
      this.userOperationType = type
      //新增
      if (type === 1) {
        this.userData = {}
        this.userTitle = '新增'
      }
      // 保存
      else {
        this.userData = userData
        this.userTitle = '修改信息'
      }
      this.userTitleVisible = true
    },
    //取消修改或新增
    cancelBtn() {
      this.userTitleVisible = false
    },
    //更新信息
    updateUser(formName) {},
    //新增
    addUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.tableData.push(this.userData)
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.userTitleVisible = false
        }
      })
    },
    // 选中
    handleSelectionChange(selectList) {
      this.deleteIdList = []
      for (var i = 0; i < selectList.length; i++) {
        this.deleteIdList.push(selectList[i].id)
      }
    },
    // 批量删除
    batchDelete() {},
    /**
     * 自定义序号
     * @param index
     * @returns {*}
     */
    indexMethod(index) {
      return index
    },
    // 删除
    deleteUser(title) {
      this.tableData.forEach((item, index) => {
        if (item.title == title) {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.userList-box {
  width: 100%;
  height: 100%;
  .userList-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    .table-top {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 1);
      align-items: center;
      box-sizing: border-box;
      padding: 12px;
      border-bottom: 1px solid #edeef0;
    }
    .page-box {
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 12px;
      text-align: right;
    }
    .table-box {
      flex: 1;
      background: rgba(255, 255, 255, 1);
    }
  }
}
.form-input-width {
  width: 360px;
}
</style>